<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>口碑榜</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <!-- 口碑榜 页面划分为独立的区块 -->
    <section class="billboard">
        <div class="billboard__hd">
            <!-- h2没有取类名的必要 .billboard_hd h2 -->
            <h2>一周口碑榜 <span><a href="#">更多榜单&gt;&gt;</a></span></h2>
        </div>
        <!-- BEM Element -->
        <div class="billboard__bd">
            <!-- table 不是为了结构， 语义 -->
            <!-- {$} 花括号代表内容 $为数字  前端为了 设计仅仅设计一组数据-->
            <table>
                <tbody>
                   <tr>
                       <td>1</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>2</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>3</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>4</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>5</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>6</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>7</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>8</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>9</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                   <tr>
                       <td>10</td>
                       <td class="title"><a href="#">狮子王</a></td>
                   </tr>
                </tbody>
            </table>
        </div>
    </section>
</body>
</html>